<template>
  <!--显示所有的地址-->
  <div class="addrList">
    <div class="title">我的地址</div>
    <ul>
      <li v-for="(addr,index) in addrList" :key="index" @click="addrId = addr.id">
        <span :class="{selectAddr : addr.id === addrId, contact:true}">{{ addr.contact }}</span>
        <span class="address">{{ addr.contact }}-{{ addr.phone }} {{ addr.province }} - {{addr.city }} - {{ addr.district }} - {{ addr.street }}</span>
      </li>
    </ul>
  </div>
  <!--  显示所有选中的购物车-->
  <div class="cartList">
    <div class="title">我选的商品</div>
    <ul>
      <li v-for="(cart,index) in cartList" :key="index">
        <el-row>
          <el-col :span="2">
            <el-image
                :src="server + '/goods/pic/' +cart.goods.picList[0].url"
                style="width: 50px;height: 50px"
                fit="contain"/>
          </el-col>
          <el-col :span="3">{{ cart.goods.name }}</el-col>
          <el-col :span="5">{{ cart.goods.color }}--{{ cart.goods.version }}</el-col>
          <el-col :span="3">￥{{ cart.goods.price }}</el-col>
          <el-col :span="2">{{ cart.count }}个</el-col>
          <el-col :span="3">总价：￥{{ cart.goods.price * cart.count }}</el-col>
        </el-row>
      </li>
    </ul>
  </div>
  <!--  显示总金额与订单的按钮-->
  <div class="footer">
    总金额：￥<span class="total">{{ total }}</span>
    <el-button type="danger" @click="createOrder">生成订单</el-button>
  </div>
</template>

<script setup>
import {useRoute} from "vue-router";
import {ref} from "vue";
import addrApi from "@/api/addrApi.js";
import cartApi from "@/api/cartApi.js";
import {ElMessage} from "element-plus";
import orderApi from "@/api/orderApi.js";
import {useRouter} from "vue-router";

const router = useRouter()
const server = ref(import.meta.env.VITE_SERVER_ADDR)
const route = useRoute()
//console.log(route.query.cartIds);
//console.log(route.query.goodsId);
const addrList = ref([])//当前用户的所有地址
const addrId = ref(null)//被选中的地址id
const cartList = ref([])//当前用户选中的购物车
//购物车的id
const total = ref(0)//总金额
//生成订单
function createOrder() {
  //判断有没有选择地址
  if (!addrId.value) {
    ElMessage.error("先选择收货地址")
    return
  }
  //已选择的购物车的地址
  let cartIds = route.query.cartIds;
  let orderVo = {
    addrId: addrId.value,
    cartIds: cartIds
  }
  //发送请求生成订单
  orderApi.insert(orderVo)
      .then(resp => {
        if (resp.code === 10000) {
          ElMessage.success(resp.msg);
          //去支付页面--跳转并且把orderId传过去
          router.push({
            path: '/user/pay',
            query: {
              orderId: resp.data.orderId
            }
          })
        } else {
          ElMessage.error(resp.msg);
        }
      })
}

//获取当前用户的购物车
function getCartList() {
  let cartIds = route.query.cartIds
  cartApi.selectByIds(cartIds)
      .then(resp => {
        if (resp.code === 10000) {
          console.log(resp.data)
          cartList.value = resp.data

          //计算总金额
          cartList.value.forEach(cart => {
            total.value += cart.goods.price * cart.count
          })
        } else {
          ElMessage.error(resp.msg)
        }
      })
}

getCartList()

//获取当前用户的所有地址
function getAddrList() {
  addrApi.selectByUser()
      .then(resp => {
        //console.log(resp.data)
        addrList.value = resp.data
        addrList.value.forEach(addr => {
          if (addr.status === 1) {
            addrId.value = addr.id
          }
        })
      })
}

getAddrList()
</script>

<style scoped>
.addrList, .cartList, .footer {
  margin: 5px 0;
  padding: 10px;
  border: 1px solid var(--theme-color);
  background-color: #eeeeee;
}

.footer {
  text-align: right;
}

.footer .total {
  font-weight: bold;
  color: var(--theme-color);
  font-size: 18px;
  margin-right: 30px;
}

.title {
  margin-bottom: 10px;
  font-weight: bold;
  font-size: 18px;
}

.addrList ul li {
  margin: 10px 0 10px 15px;
  height: 30px;
  line-height: 30px;
}

.addrList .contact {
  margin-right: 15px;
  display: inline-block;
  text-align: center;
  border: 1px solid #FFFFFF;
  width: 80px;
  cursor: pointer;
}

.addrList .contact :hover {
  border: 1px solid var(--theme-color);
}

.addrList .selectAddr {
  border: 2px solid var(--theme-color);
  box-shadow: 0 0 2px black;
}

.cartList ul li {
  margin: 10px 0 10px 15px;
  height: 50px;
  line-height: 50px;
}
</style>